import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: root
    color: "#f5f5f5"
    radius: 4
    
    property int spinBoxValue: spinBox.value

    ColumnLayout {
        id: layout
        anchors {
            top: parent.top
            topMargin: 20
            horizontalCenter: parent.horizontalCenter
        }
        spacing: 20

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "基础SpinBox示例"
            font.bold: true
            font.pixelSize: 14
        }

        RowLayout {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter
            spacing: 10

            SpinBox {
                id: spinBox
                implicitHeight: 25
                value: 50
                from: 0
                to: 100
                editable: true
                
                // 添加数值显示格式化
                textFromValue: function(value, locale) {
                    return Number(value).toLocaleString(locale, 'f', 0)
                }
                
                // 添加输入验证
                validator: IntValidator {
                    bottom: spinBox.from
                    top: spinBox.to
                }
            }

            Text {
                text: "当前值：" + spinBox.value
                Layout.alignment: Qt.AlignVCenter
            }
        }

        Text {
            text: "说明：这是一个基础的SpinBox示例，支持直接编辑输入"
            font.pixelSize: 12
            color: "#666666"
            wrapMode: Text.WordWrap
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
} 
